<style scoped>
@media (min-width: 1000px) {
  .edit_card {
    width:400px;
    /* border:1px solid blue; */
    padding-right: 20px;
    /* box-shadow: 2px 2px 2px #666; */
  }
}
@media (max-width: 400px) {
  .edit_card {
    width:200px;
    border:1px solid blue
  }
}
</style>

<template>
    <transition name="fade" mode="out-in">
        <Card>
            <div class='edit_card' style="padding-bottom:20px;">
                <div>
                    <span>{{conditionable?'生效中':'未生效'}}</span>
                    <Row v-for="(condition,n) in conditions" :key="n">
                        <Select size="small" v-model="condition.field" style="width:100px">
                            <Option v-for="filed in fileds" :value="filed.name" :key="filed.name">{{ filed.title }}</Option>
                        </Select>
                        <Select size="small" v-model="condition.predicate" style="width:100px">
                            <Option v-for="predicate in fileds[condition.field]['predicates']" :value="predicate.name" :key="predicate.name">{{predicate.title}}</Option>
                        </Select>
                        <Select size="small" clearable filterable v-model="condition.value" style="width:100px">
                            <Option v-for="(user, n) in users" :value="user._id" :key="user._id">{{user._id}}</Option>
                        </Select>
                        <!-- <component size="small" v-model="condition.value" :is="fileds[condition.field]?selectors[fileds[condition.field].type]:'Input'" style="width:100px;height:22px"></component> -->
                        <!-- <UserSelect size="small"  filterable v-model="condition.value" style="width:100px"></UserSelect> -->
                    </Row>
                    <Row>
                        <Button type="primary" @click="ok">确定</Button>
                        <!-- <Button type="primary" @click="clear">清空</Button> -->
                        <Button type="ghost" style="margin-left: 8px" @click="cancel">取消</Button>
                    </Row>
                </div>
            </div>
           
        </Card>
    </transition>
</template>
<script>


    import moment from 'moment'
    import { mapState, mapActions } from 'vuex'
    import UserSelect from './user-select'
    import TransferDom from 'iview/src/directives/transfer-dom'
    import Vue from 'vue'

    export default {
        name: 'Advance-filter',
        props:{
        },
        computed: mapState({
            'allLabels':'allLabels',
            'conditions':'conditions',
            'users':'users',
            'conditionable':'conditionable'
        }),
        directives: { TransferDom },
        data(){
            return {
                showCard: false,
                // fileds:[
                //     {
                //         name:'user',
                //         title:'用户',
                //         type:'user'
                //     },
                //     {
                //         name:'content',
                //         title:'内容',
                //         type:'string'
                //     }
                // ],
                fileds:{
                    'user':{
                        name:'user',
                        title:'用户',
                        type:'user',
                        predicates:[
                            {
                                name:'=',
                                title:'等于'
                            }
                        ]
                    },
                    // 'content':{
                    //     name:'content',
                    //     title:'内容',
                    //     type:'string'
                    // }
                },
                predicates:[
                    {
                        name:'>',
                        title:'大于'
                    },
                    {
                        name:'<',
                        title:'小于'
                    },
                    {
                        name:'=',
                        title:'等于'
                    }],
                selectors:{
                    'user':UserSelect,
                    'string':'Input',
                },
                // conditions:{
                //     user:{
                //         field:'user',
                //         predicate:'=',
                //         value:'jiangqifan'
                //     }
                // }
            }
        },
        methods: Object.assign(
            mapActions([
                'listLogs',
            ]),{
                ok(){
                    this.$store.state.conditionable = true;
                    this.listLogs();
                    this.$store.commit("setShowAdvanceFilter",false);
                },
                clear(){
                    this.conditions[0].value=null;
                    // this.$set(this.conditions['user'], 'value', '');
                    // this.conditions.forEach(function(condition,n){
                    //     this.$set(condition, 'value', '');
                    // }.bind(this))
                },
                cancel(){
                    if(this.$store.state.conditionable){
                        this.$store.state.conditionable = false;
                        this.listLogs();
                    }
                    this.$store.commit("setShowAdvanceFilter",false);
                },

        }),
        components:{
            UserSelect,
        }
    

    }
</script>

